<template>
    <div class="order">
        <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
        <van-tabs v-model="active" @change="onChange()">
            <van-tab name='all' title="全部"></van-tab>
            <van-tab name='payment' title="待支付"></van-tab>
            <van-tab name='delivery' title="待发货"></van-tab>
            <van-tab name="received" title="待收货"></van-tab>
            <van-tab name="comment" title="待评价"></van-tab>
        </van-tabs>

        <OrderListItem v-for="(v, i) in orderList" :key="i" :orderItem='v' @cancelPay="cancelPay"></OrderListItem>
    </div>
</template>

<script>
import OrderListItem from '@/components/OrderListItem.vue'
import { getMyOrder, cancelOrder } from '@/api/addcart'
export default {
    name: 'OrderPage',
    components: {
        OrderListItem
    },
    data() {
        return {
            active: this.$route.query.dataType || 'all',
            page: 1,
            orderList: []

        }
    },
    methods: {
        async getOrderData() {
            const { data: { list: { data } } } = await getMyOrder(this.page, this.active)
            this.orderList = data
            console.log(this.orderList, 'xxxx');
        },
        onChange() {
            this.getOrderData();
        },
        // 取消支付
        async cancelPay(orderId) {
            let res = await cancelOrder(orderId)
            if (res.status === 200) {
                this.getOrderData()
            }
            this.$toast.success('取消成功')
        }
    },
    created() {
        this.getOrderData();
    },

}
</script>

<style lang="less" scoped>
.order {
    background-color: #fafafa;
}

.van-tabs {
    position: sticky;
    top: 0;
}
</style>